<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        div {
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid #ccc; 
        }
    </style>
</head>

<body>

    <!-- <div></div> -->

    <script>
        // 记录颜色的数组
        var data = [   // 索引值
            "red",     // 0
            "green",   // 1
            "blue",    // 2
            "pink",    // 3
            "orange",  // 4
            "purple",  // 5
            "yellow",  // 6
            "gray",    // 7
        ]

        // 要求：
            // 定义变量，记录两次输入的值（开始，结束）
            // 根据输入的值，截取data数组中指定的数据 （slice）
            // 把截取出来的数据表现在页面上（渲染）

        // 编码：
        // 记录输入的值
        var startIndex = prompt("请输入开始的下标");
        var endIndex = prompt("请输入结束的下标");
        // console.log(typeof endIndex);// sting

        startIndex = startIndex - 0;
        endIndex = endIndex - 0;
        // console.log(typeof endIndex);// number

        // 截取data数组中的数据
        var res = data.slice(startIndex,endIndex + 1);
        console.log(res);// 从数组截取的数据 ，是个数组

        // 定义变量
        var str = "" ;
        // 循环 res 数组
        for(var i = 0 ; i < res.length ; i ++){
            // 拼接字符串
            str += "<div style='background:"+res[i]+";'></div>"
        }
        // 渲染字符串(动态渲染)
        document.write(str);

    </script>
</body>

</html>